<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>materialized memory viewer</title>
    <script src="https://cdn.jsdelivr.net/npm/@hpcc-js/wasm@0.3/dist/index.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/pako@1/dist/pako.min.js"></script>
    <style>
      svg {
        width: 100%;
        height: auto;
      }
    </style>
  </head>
  <body>
    <div><button onClick="copy()">copy graph.dot to clipboard</button></div>
    <div id="view" hidden style="margin: 1em;"></div>
    <div id="graph"></div>
    <script>
      const hpccWasm = window['@hpcc-js/wasm'];

      // Strip off the initial '#', decode any % that were added, convert from
      // base64, uncompress, parse as JSON.
      let hash = decodeURIComponent(location.hash.slice(1));
      hash = atob(hash);
      hash = pako.inflate(hash, { to: 'string' });
      const data = JSON.parse(hash);
      const graph = data.dot;

      hpccWasm.graphviz.layout(graph, 'svg', 'dot').then((svg) => {
        document.getElementById('graph').innerHTML = svg;
      });

      if (data.view) {
        const node = document.getElementById('view');
        node.appendChild(document.createTextNode(`View: ${data.view.name}`));
        const view = document.createElement('div');
        view.style.padding = '.5em';
        view.style.backgroundColor = '#f5f5f5';
        view.textContent = data.view.create;
        node.appendChild(view);
        node.hidden = false;
      }

      function copy() {
        navigator.clipboard.writeText(graph);
      }
    </script>
  </body>
</html>
